CODEWITHSUNDEEP
javascripthtmlcss
maimok
maimok

Reputation: 373

Placing icon after paragraph text regardless of line length with CSS

I'm attempting to add an icon after the last paragraph text that I am appending using JavaScript. My issue, that the last paragraph text-length varies, and based off how my current styling to get the icon sitting in-line it only works for one specific length. If the paragraph was a few words longer the icon would appear over text for example:

enter image description here

How can I style the icon and text in order for it to appear at the end of every paragraph regardless of length? At the moment I am using position absolute while adjusting the right and top margin positioning.

Here are the CSS properties that I am using for this example:

.paragraph {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 140%;
letter-spacing: .5px;
color: #333;
padding: 15px 0 5px 0;
}

.icon-lock {
position: absolute;
right: 54%;
margin-top: -30px;
}

My expected outcome is for the icon to appear at the end of the paragraph regardless of length without overlapping with the text output.

Here is a link to a jsfiddle example

Upvotes: 0

Views: 2038

Answers (2)

Sergio Gabriel Fruto
Sergio Gabriel Fruto

Reputation: 331

Instead of positioning the icon absolutely, I would put the text inside a <p> and put the .icon-lock in the same level, and then add display: inline to both the new <p> and the .icon-lock . This way, the icon will always sit right next to the end of the paragraph.

Working example: https://jsfiddle.net/nkg1269x/9/

Upvotes: 2

deepak
deepak

Reputation: 1375

    .paragraph {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 140%;
letter-spacing: .5px;
color: #333;
padding: 15px 0 5px 0;
position:relative;
}
.paragraph::after{
  content: '\1F516';
  position:absolute;
  bottom:5px;
  padding-left:10px;
}

Upvotes: 0

Related Questions