How to Highlight text in WordPress

HOW TO HIGHLIGHT WORD OR TEXT BACKGROUND IN WORDPRESS POST

The simple technique to Highlight words or text or any sentence in WordPress websites or blogs is to use the HTML mark tag. By default, the tag highlights any word or text in Yellow florescent background, but with little CSS tricks, you can manage to change the Background Color of the Highlight.

1
2
3
4
5
6

<mark>Yellow</mark>
<mark style="background-color:pink;">Color Pink</mark>
<mark style="background-color:Green;">Color Green</mark>
<mark style="background-color:#F781F3;">Color Value #F781F3</mark>
<mark style="background-color:#F781F3;display: inline-block;  line-height: 0em; padding-bottom: 0.5em;">Display Inline Block</mark>
<h3><highlight>This is my Custom Highlight text</highlight></h3>

Example: Yellow
Example: Pink
Example: Green
Example: Color Value #F781F3
Example: Display Inline Block
Example:

This is my Custom Highlight text

To achieve this custom highlighter effect, you need to copy the following CSS code in your WordPress themes style.css file or add through themes customization menu and add under custom CSS. Feel free to play with the CSS code to change effects or color values.

1
2
3

highlight {
  background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFD0AE 50%);
}

If you do not specify any style for background colour, the default is always Yellow. This sentence is highlighted with HIGHLIGHT tag as available in code example above for inline block.

You can find more references below:

Try to do experiments with the colors and other CSS elements to enjoy your creativity.

Also check some other Articles on WordPress Migration to other servers.

• Moving WordPress to another Server by wordpress.org
• Moving WordPress to another Server by wpexplorer
• Moving WordPress to another Server by wpbeginner