Beautiful mark tag style in CSS

texe

Chris Texe

Posted on August 3, 2022

Beautiful mark tag style in CSS

I am sure you many times used a mark tag in your HTML document. Without any styling it can be a little bit boring:

Standard mark tag style

With few lines of CSS code we can make it a little nicer, like this:

Styled mark tag

The whole secret is in these lines of CSS code:



mark.one {
  background: linear-gradient(
  -100deg,
  hsla(48,92%,75%,.3),
  hsla(48,92%,75%,.7) 95%,
  hsla(48,92%,75%,.1)
  );
  border-radius: 1em 0;
  padding: .3em;
  }


Enter fullscreen mode Exit fullscreen mode

It would be great if you will comment or follow me on social media:

Chris Texe Twitter

Chris Texe LinkedIn

Also you can visit my websites:

💖 💪 🙅 🚩
texe
Chris Texe

Posted on August 3, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related