Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Help! CSS for Highlighting Text


Hey guys, I love how genius your forum is.  I'm a self-taught programmer and I'm getting my ass kicked on highlighted text.  It seems like its ubiquitous on the web to have this colorfut text blocks but the css is driving me nuts.  

I wanted to make my website look like this uber-cool one from tamsen webster: https://tamsenwebster.com/ (totally whispered that idea).  


It has super-perfect css which resizes perfectly.


But all I got was this hacked version which you can see live in all its dorky glory at deliveringcures4cancer.org (btw nonprofit client is kickass, I'm the dork :)


using two separate code blocks on the main page: 

     <H2 style="background: #ff69b4; padding-left: 0.5em; box-shadow: 0 0 10px 10px #fff"> We fast-track</H2>

     <H2 style="background: #ff69b4; padding-left: 0.5em; box-shadow: 0 0 10px 10px #fff"> cures for cancer.</H2>

And it resizes really weird because they are two different text blocks. If I put them together then I can't get a gap to show between the lines of text.



Please whisper some ideas to me is there a way to do this with custom css code and H2 text that I'm missing??? 




Share this post

Link to post

1 answer to this question

Recommended Posts

  • 0

Hi Drea,

This is the code they are using to achieve that affect:

.redtitle {
position: relative;
line-height: 1;
color: #fff;
display: inline;
white-space: pre-wrap;
border: 0 solid #ff0000;
border-width: 0.10em 0;

.redtitle:after {
background-color: #ff0000;

Their heading uses the class redtitle, which is what they are targeting. You could replace yours with your own class or target all H2's.

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...