CODEWITHSUNDEEP
css-position
Riccardo79
Riccardo79

Reputation: 1046

CSS float image align

I need to add this image enter image description here at the end of a line, in this way

enter image description here

Style:

h4 { border-bottom: 1px solid black; font-size: 1.6em;}

Code that I did:

<h4>Socializziamo <img src="flourish-decoration.png" 
    style="position:relative; display:inline-block; float:right;bottom:-7px;" />
</h4>

Is there a better way, because my solution sometimes does not works...

Riccardo

Upvotes: 0

Views: 55

Answers (2)

avik
avik

Reputation: 2708

Here's an alternative to ggbhat's answer. The approach here is to apply relative positioning on the heading and absolute positioning on the nested image.

HTML

<h4>
    Socializziamo <img src="https://i.sstatic.net/68LQd.png" />
</h4>

CSS

h4 { 
    border-bottom: 1px solid black; 
    font-size: 1.6em;
    position: relative;
}

img {
    position: absolute;
    right: 0;
    bottom: -1px;
}

Demo

http://jsfiddle.net/LqvTx/1/

Upvotes: 1

Gajanan
Gajanan

Reputation: 140

Use :after psuedo element for adding background image .

h4
{ 
border-bottom:1px solid #000;
width:100px;
}


h4:after {
content:"";
background:url(https://i.sstatic.net/68LQd.png)no-repeat;
width: 30px;  
height: 30px;
background-position:68% 25%;
position: absolute;
display: inline-block;
}

Demo:[http://jsfiddle.net/LqvTx/ ]

Upvotes: 0

Related Questions