Html code highlight css

::highlight()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The ::highlight() CSS pseudo-element applies styles to a custom highlight.

A custom highlight is a collection of Range objects and is registered on a webpage using the HighlightRegistry .

Allowable properties

Only certain CSS properties can be used with ::highlight() :

In particular, background-image is ignored.

Syntax

::highlight(custom-highlight-name)

Examples

Highlighting characters

HTML

p id="rainbow-text">CSS Custom Highlight API rainbowp> 

CSS

#rainbow-text  font-family: monospace; font-size: 1.5rem; > ::highlight(rainbow-color-1)  color: #ad26ad; text-decoration: underline; > ::highlight(rainbow-color-2)  color: #5d0a99; text-decoration: underline; > ::highlight(rainbow-color-3)  color: #0000ff; text-decoration: underline; > ::highlight(rainbow-color-4)  color: #07c607; text-decoration: underline; > ::highlight(rainbow-color-5)  color: #b3b308; text-decoration: underline; > ::highlight(rainbow-color-6)  color: #ffa500; text-decoration: underline; > ::highlight(rainbow-color-7)  color: #ff0000; text-decoration: underline; > 

JavaScript

const textNode = document.getElementById("rainbow-text").firstChild; if (!CSS.highlights)  textNode.textContent = "The CSS Custom Highlight API is not supported in this browser!"; > // Create and register highlights for each color in the rainbow. const highlights = []; for (let i = 0; i  7; i++)  // Create a new highlight for this color. const colorHighlight = new Highlight(); highlights.push(colorHighlight); // Register this highlight under a custom name. CSS.highlights.set(`rainbow-color-$i + 1>`, colorHighlight); > // Iterate over the text, character by character. for (let i = 0; i  textNode.textContent.length; i++)  // Create a new range just for this character. const range = new Range(); range.setStart(textNode, i); range.setEnd(textNode, i + 1); // Add the range to the next available highlight, // looping back to the first one once we've reached the 7th. highlights[i % 7].add(range); > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Источник

How to Highlight Text in CSS [and Some Amazing Examples]

In this article, we will learn about CSS highlight text effects and create cool aesthetics to make certain words and sentences stand out.

Highlight text (CSS) is used for links, to make them more visible, for important words to draw attention to them and for other uses like the most copied or Tweeted text, an easy way to show which text is the most popular.

In real life, you would use a range of highlighter pens, but in web development, we will be using HTML and CSS.

How Do I Highlight Text In CSS?

To Highlight text in HTML you have to use an inline element such as the element and apply a specific background style on it. This will create the highlighting effect, which you can tweak in many different ways to create different looks.

Most of the examples in this article follow the following structure:

p> 
Normal Text vs span class=”highlight”>highlighted text.span>
p>

.highlight 
display: inline-block; 
padding: .25em 0; 
background: #FFC107; 
color: #ffffff;
>

12 Awesome CSS Highlight Text Effects

Let’s dive in and see some real-world examples of cool CSS highlight text effects. You can use these examples for your website, learn from them, or get inspired!

1. Text Highlight With Yellow Color

A beautiful example of how to highlight text with a bit of style.

Notice that the highlighting is not perfectly rectangular and uses some rounded borders together with some small rotation to give it a more natural look and feel.

I find this effect especially useful for headings. Sometimes, depending on the highlighting color, we might want to also change the color of the highlighted text to something that can create more contrast with the background.

Remember the whole point of highlighting something is making it easier to read.

2. Slanting CSS Highlight Text Effect

This cool slanting CSS highlight text effect is very cool and looks appealing.

It just uses the HTML element to highlight bold text with this cool effect.

Very simple to use and comes with a nice code example to learn from.

3. Block Highlight Text (CSS)

By using an HTML span element, you can create this lovely blocked CSS highlight text effect.

You just need to apply the CSS class to your span element and then the effect is applied.

Very easy to use and creates a bold look, easily change the colors to match your style in the CSS.

4. Highlight Text With Animation On Page Load

In this example, we can see a totally different approach to the highlighting effect.

The highlight will not be present on page load instead, it will get animated on page load creating a beautiful effect that will for sure catch your visitor’s attention.

If you are looking for an animation on page load, this example is the one for you.

5. Animated CSS Text Highlighting On Hover

Static CSS highlight text effects are cool, but using some simple animation can create more engagement.

This hover effect is fantastic and makes words more interactive, which is very important.

You can even adapt this to work with a button that pops up on a word along with this effect.

6. Highlight Text With Circle Pen Animation

A cool CSS highlight text effect that makes it look like you have circled a word with a pen.

This CSS CodePen shows you how you can easily only target a single word within a sentence, inside an HTML P tag.

The CSS used here is simple enough as well, you can easily change the colors and sizing of the circle.

7. CSS Sketch Text Highlight

This example by Ion Emil shows us that highlighting can be done in many different ways.

In this case, instead of using a more traditional yellow highlighting effect, it uses a sketchy-looking highlighting effect that looks as if it was done with a pen over a piece of paper.

8. Realistic Marker Hover Highlight Effect

Made by Jeffrey, this is another cool hover effect paired with a realistic marker effect.

It uses an SVG to pull off the realistic look, but it is simple enough to use on a webpage, it will scale to any size text.

Pure CSS as well, so it is very lightweight.

You can also find cool animations with CSS Hamburger Menus as well, check out our article on that too

9. Higlight Text With Underline Transition

When we talk about highlighting text, we usually think about adding something on top of the text. However, another way to emphasize something can also be by underlying it.

So, why not, here’s a different kind of highlighting effect if you don’t mind using an underline instead.

10. Realistic Marker Effect

If you are looking for a super realistic marker effect, this one is for you.

It looks really cool and realistic as if you actually used a marker pen.

An SVG is used to pull this off and create the special edges on the highlighted text, but it is still simple enough to use and not complicated.

11. Highlight Text With Color Gradients

If you are into gradients, why not use gradient color for your highlighted text too?

This example makes use of the linear-gradient function inside background-image to generate the gradient highlight effect. Feel free to play with it and customize the gradients!

12. Multi-Coloured Overlapping Highlighting

A little more complicated, but the result is very interesting and could be just what you are looking for.

Requires use of all HTML, CSS, and JS to pull this effect off.

However, you can easily change the colors with the RGB values in the JS code.

13. Gradient Highlight Text (CSS)

A fancy way of highlighting HTML text with a cool gradient.

You can pick any gradient you like and create a sleek look for your text.

The CSS is simple, but the outcome is fantastic.

14. Big Realistic Marker Effect

Highlighting text can be a fantastic way to make certain things stand out, in this case, pricing is the example here.

If you have an important page like pricing, highlighting the text can be a sure starting way to draw attention to a specific area.

This example uses a simple SVG to get a realistic look, but the CSS is still relatively simple.

15. Border CSS Highlight Text Effect

A very simple CSS highlight text effect.

Basically, just a border around the text, using a span element to select certain parts of the text.

You can easily change the color and padding around the CSS highlight text as well.

16. Arrow CSS Highlight Text Effect

Another cool CSS highlight text effect with a different style.

Shows how you can highlight specific words inside a sentence.

Simple CSS used and just a span element with a CSS class to use it throughout a webpage.

17. Ribbon CSS Highlight Text Effect

There are many ways to highlight text using CSS, here we have a green ribbon effect that highlights a few words.

By using a different shape, it can help make your text stand out more.

The CSS is simple as well, easy to change the color or effect if needed.

18. Bonus CSS Highlight Text Effect (jQuery)

We’ve seen some amazing CSS highlight text effects and they all offer something different. They can help make certain parts of your text stand out and draw attention to something.

This bonus one was added in because it shows you how you can use jQuery to programmatically use these text effects to highlight text, check it out!

Related Articles

Luke Embrey is a full-stack developer, BSc in Computer Science and based in the UK.
You can find out more about him at https://lukeembrey.com/

Join 2,000+ readers and learn something new every month!

Источник

How to highlight text in color using HTML and CSS

Highlighting text on a web page helps bring important information immediately to the reader’s attention. For example, this text is highlighted in yellow and probably caught your eye first. There are several methods for highlighting text. To proceed, select a method from the list below and follow the instructions.

Highlight using the HTML5 tag

If you are working on an HTML5 page, the tag can quickly highlight text. Below is an example of the how to use the mark tag and its result. If your browser supports the tag, «highlighted text» should have a yellow background.

Example code

Here is an example of highlighted text using the <mark> tag.

Example result

Here is an example of highlighted text using the tag.

Highlight text with only HTML code

To highlight text with HTML (hypertext markup language) code and support for all browsers, set the background-color style, as shown in the example below, using the HTML tag.

Example code

This text is highlighted in yellow.

Example result

This text is highlighted text in yellow.

In the example above, the HTML tag has a background-color code of #FFFF00, which is yellow. In this case, the word «yellow» could be used in place of the color code, or any other color name for that matter.

With the same code, you could also highlight one or more words within a paragraph to draw attention to a specific section of the text.

Highlight text with CSS & HTML

You can also create a CSS (cascading style sheets) class and set the «background-color» attribute, as shown in the example below.

Example code

In the CSS code above, there are three elements being defined. First, the body background color is set to blue, second, a new class called «highlightme» with a yellow background, and finally, the paragraph tag has a white background.

To use the «highlightme» class to highlight your text, you can create a tag in your HTML which references the CSS class.

Example code

The CSS class or style class mentioned above could also be applied to a paragraph tag if you wanted to highlight a complete paragraph as shown below.

Example code

This whole paragraph of text is highlighted in yellow.

Example result

This whole paragraph of text is highlighted in yellow.

Related information

Источник