CODEWITHSUNDEEP
javascripthtmlcss
Gabbax0r
Gabbax0r

Reputation: 1826

How to set icon after the last word of a text block?

Is it possible to set an icon or whatever after the last word of a text block?

I want to set an icon after the last word "nibh." something like a bigger grey dot. I tried so far with ::after and also with different JS functions but either it destroyed my text content or the dot was under my <div>/<p> and not inline with the sentence.

.article-text:after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
  background-color: #dadada;
  margin: 0px 10px 0px 7px;
}
<div class="article-text">
  <h3>Lorum ipsum</h3>

  <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci
    luctus et ultrices posuere cubilia </p>

  <p>Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Sed porttitor lectus nibh.</p>

</div>

Upvotes: 2

Views: 501

Answers (2)

Sagar V
Sagar V

Reputation: 12478

You need to change the css selector to .article-text p:last-child::after

Because

  1. You are using article-text - It will check for HTML element article-text not for class. Use . to indicate class .article-text.

  2. Since the last word is in a p tag, the after content of div will shown in next line.

  3. Use :last-child because you have 2 p tags and want to show it only for last p tag

.article-text p:last-child::after {
  content: '.';
  display: inline-block;
  width: 15px;
  height: 15px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
  background-color: #dadada;
  margin: 0px 10px 0px 7px;
}
<div class="article-text">
  <h3>Lorum ipsum</h3>

  <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci
    luctus et ultrices posuere cubilia </p>

  <p>Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Sed porttitor lectus nibh.</p>

</div>

Upvotes: 3

codesayan
codesayan

Reputation: 1715

Check That,

.dot:after {
     content: '';
     display: inline-block;
     width: 15px;
     height: 15px;
     -moz-border-radius: 7.5px;
     -webkit-border-radius: 7.5px;
     border-radius: 7.5px;
     background-color: #dadada;
     margin: 0px 10px 0px 7px;
}
<div class="article-text">
<h3>Lorum ipsum</h3>

<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia </p>

<p>Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus <span class="dot">nibh.</span></p>

</div>

Upvotes: 0

Related Questions