I am trying to put a point on the right side of a relative (no defined width) div.
HTML (using WordPress and Bootstrap)
<div class="col-md-9 col-md-offset-1">
<h2 class="sml-title"><?php the_category(' - '); ?></h2>
...
CSS
.sml-title {
display: inline-block;
padding: 15px;
color: #fff;
background-color: #4ad2dc;
}
.sml-title:after {
right: 0px;
top: 0px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 30px;
margin-top: -30px;
}
the problem I’m running into is that the arrow goes all the way to the right side of the screen. I want it to go right after the sml-title. But I can’t set a width on the sml-title because i don’t control the content.
Trying to accomplish this
You can achieve the shape as either of the two ways-
If you use
position: absolute
, it will position the element within the nearest parent which is eitherposition: relative
orabsolute
. In your case,.sml-title
has neither of those properties, so.sml-title:after
is not positioned within.sml-title
.If you want your
::after
pseudoelement to be positioned within.sml-title
, you’ll need to addposition: relative
orabsolute
to.sml-title