how to position icon just after h2 tag using :after pseudo even though 100% width


Tags: css

Problem :

Was wondering if anyone know how I can position the triangle icon directly after the text of my h2 tag, at the moment I use :after and float this to the right but because the h2 is display: block this triangle is positioned way to the right. Since I have a border-bottom that needs to stretch the 100% I cant use display: inline-block to get my result. Wondering if I can achieve this without having to add in empty spans etc

Fiddle: http://jsfiddle.net/7bCwv/

HTML:

<h2 class="definition-heading">Tools for Internet Users</h2>

CSS:

    h1, .carousel-caption, h2, h3, h4 {
    font-family:"Proxima Nova Semi Bold", Arial, Helvetica, sans-serif;
    color: #454545;
    font-size: 16px;
}
h2 {
    border-bottom: 1px solid #b7b7b7;
    padding: 10px 0;
}
.definition-heading:after {
    content:'';
    border-bottom: 5px solid transparent;
    border-left: 7px solid #e15646;
    border-top: 5px solid transparent;
    height: 0;
    width: 0;
    float: right;
    position: relative;
    top: 7px;
    margin-left: 9px;
}


Solution :

If you use inline-block on your generated content, it should do exactly what you're after. See this fork, CSS changes:

.definition-heading:after {
   display: inline-block; /* add this */
   /* float: right;
   top: 7px; remove these */
}

Which gives:

Screenshot using inline-block


    CSS Howto..

    How to create a natural-looking line using css and maybe javascript? [closed]

    How could I use postcss-bem with css-modules or postcss-js in React component

    HTML+CSS: How to force div contents to stay in one line?

    CSS how to align elements inside a div with 2 columns

    how to make small loading circle by changing css height and width?

    How to apply padding to an HTML input element?

    CSS - How make the page scroll over the edge of the window

    (Mobile View) How to make UI tabs heading to work as a drop down

    How to fake width animation with CSS transform?

    how to add two widths to one class in css

    How to Center a image with HTML CSS

    How can i make a site like this by myself? [closed]

    how to show one element under the other one?

    how to make background fit on screen bootstrap3

    How do I get text to go in the middle of a div? [duplicate]

    How to use javascript to transition a property from a set attribute to a new attribute

    How to wrap lines in an inline-block with CSS?

    How to call a image class on a regular interval

    How do I fit text into footer margins

    How to shrink the menu when mouse hover on a link using jquery

    How do I get rid of the big margin between my labels and the input fields?

    How to re-size an image inserted via tag?

    Foundation CSS Framework, how to change triangle on accodion

    How to have complex shadow background on variable height content area via CSS?

    How to select a css class as selected dynamically in mvc

    Wordpress how to make sticky navigation menu / make the menu stick to the top all the time?

    How to fix header cannot sticky in wordpress?

    CSS triangle over a div using :before and :after - weird offset, how to fix?

    How to draw the following shape using CSS3 [duplicate]

    How could I use the html a tag to change div width and height?