A super fun trend going around is the highlighted text effect. In the CSS world, it’s essentially a border that shows behind your text in the color of your choosing. Bre asked in our facebook group how to make this happen, so I thought I’d put together a quick tutorial for y’all.
Copy and paste the code below into Appearance > Customize > Additional CSS and be sure to hit save and publish.
.highlighted {
position: relative;
}
.highlighted:after {
bottom: 0px;
content: '';
height: 10px;
position: absolute;
background: #ddd;
left: -3px;
width: calc(100% + 6px);
z-index: -1;
}
2. Navigate to the post or page you’d like to use this effect and click the “html” option in your block editor.
3. Copy and paste the code below, changing the text between the html to the text you would like highlighted.
<span class="highlighted">Your Highlighted Text</span>
Bonus: You could also take it a step further and highlight a heading by wrapping that span class in heading tags. Here is an example of that below.
You know what else you could do?! Create a few different colored options and have all sorts of fun color coding and organizing content with this simple little addition to your CSS! So fun! Geeking out over here imagining the possibilities…
So there you have it – super simple, and another fun way to bring attention to text within your blog and website. xo Lindsey
The post Add Highlighted Text to Your Blog Posts or Pages appeared first on Pretty Darn Cute Design.