CODEWITHSUNDEEP
csshighlightunderline
user7214732
user7214732

Reputation: 11

How do I make a custom highlight in css?

enter image description here

^ Something like that - is it using :after ? (wasnt able to do it for multiple lines)

.home-about h3:after{
 margin-top:-15px;
 content: " ";
 background:#d7edf4;
 z-index: 0;
}

Upvotes: 0

Views: 155

Answers (2)

Syfer
Syfer

Reputation: 4489

give this a try:

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

Below is the code in action:

.Pink::selection {background: #ffb7b7; /* WebKit/Blink Browsers */}
.Pink::-moz-selection {background: #ffb7b7; /* Gecko Browsers */}

.DarkRed::selection {background: #ff0000; /* WebKit/Blink Browsers */}
.DarkRed::-moz-selection {background: #ff0000; /* Gecko Browsers */}
<p class="Pink">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique quam in ex posuere, eu commodo velit sodales. Vestibulum at volutpat lorem, quis interdum diam. Phasellus metus sem, lobortis eu neque eget, tincidunt hendrerit purus. Sed mollis orci dapibus lectus blandit, eget fringilla sapien ullamcorper. Aenean accumsan justo sit amet sapien finibus tincidunt. Nam vitae purus ligula. Nunc quis neque id enim ultricies euismod at id metus. In hac habitasse platea dictumst. Sed suscipit, augue id tempus blandit, orci sem faucibus turpis, ac volutpat sem enim eleifend dui. Maecenas congue augue at lacus viverra rhoncus. </p>

<p class="DarkRed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique quam in ex posuere, eu commodo velit sodales. Vestibulum at volutpat lorem, quis interdum diam. Phasellus metus sem, lobortis eu neque eget, tincidunt hendrerit purus. Sed mollis orci dapibus lectus blandit, eget fringilla sapien ullamcorper. Aenean accumsan justo sit amet sapien finibus tincidunt. Nam vitae purus ligula. Nunc quis neque id enim ultricies euismod at id metus. In hac habitasse platea dictumst. Sed suscipit, augue id tempus blandit, orci sem faucibus turpis, ac volutpat sem enim eleifend dui. Maecenas congue augue at lacus viverra rhoncus. </p>

Let me know how you go.

Cheers

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53709

Yes you can use a pseudo element. Here's a way absolutely positioned in the h3 with a negative z-index.

h3 {
  position: relative;
  display: inline-block;
}

h3:after {
  content: " ";
  background: #d7edf4;
  z-index: -1;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: .4em;
}
<h3>text</h3>

Upvotes: 1

Related Questions