How to change the shape of text highlighted using CSS

Question

I want to highlight a part of a text as shown in the image below, I have tried using background-color which didn't give me very useful results. Also, this same styling is used in different places so can't use SVG, as it will lead to multiple SVGs. The text is supposed to be always highlighted, I'm not talking about modifying text when its selected

This is the code I have already tried (this code highlights the text but not in the way I want it). The problem is how to highlight the text in the shape I want it to be ?

span {
  background-color: yellow;
}

<div>
some text <span>highlighted</span>
</div>

What code have you tried so far? A stack overflow post here goes into it in depth: https://stackoverflow.com/questions/23737776/how-to-color-specific-word-in-a-container-using-css — Nathaniel Flick, Jan 06 '19 at 07:03
try this - `yellow text.`. also try to google first. It's a bacis task. — Ashiqur Rahman, Jan 06 '19 at 07:03
@AshiqurRahman I don't want basic highlighting, and google was not able to help me. — siddharth lakhara, Jan 06 '19 at 07:32
@NathanielFlick I have added the code I have tried. It's a very basic code. The problem here is how to modify the shape of highlighted text ? — siddharth lakhara, Jan 06 '19 at 07:34
@siddharthlakhara - you should add that comment to your question. Actually it's the first thing you've written that is actually *a question*. — But those new buttons though.., Jan 06 '19 at 07:36
If you want it to look like that you'll need either a custom background image underneath (that can scale) or cut out the center text in a rectangle and keep the remaining 4 edges as individual images that can be rendered in an `:after` and `:before` at top/bottom/left/right offsets accordingly. And then of course apply the matching background-color for the center text when composed together — Deryck, Jan 06 '19 at 07:37
I'm not sure how much help this will be but it *is* possible to create some shapes using pure css: https://css-tricks.com/the-shapes-of-css/ — But those new buttons though.., Jan 06 '19 at 07:54
If you have access to the html, use the tag then style its background to suit. latimes.com uses this and it looks great. More info on mdn here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark. You could make a background image, but you won't ever know how it will stretch so I'd avoid it but you can apply a bg image to an html tag. — Nathaniel Flick, Jan 06 '19 at 17:52

score 2 · Answer 1 · answered Jan 06 '19 at 07:14

You can set a background color and a shadow, but to achieve a specific shape you'll have to create it manually, probably with SVG.

div{
  padding: 4px;
}
span {
  background-color: #E7C246;
  border-radius: 4px;
  box-shadow: 3px 5px 5px -5px rgba(0,0,0,0.75);
  padding: 5px;
}

<div>
  Some text and <span>some highlighted text<span>
</div>

score 0 · Answer 2 · answered Jan 06 '19 at 08:17

you can use the CSS ::selection tag to change properties of the selected text, but only a few properties can be changed, namely: color, background, cursor, and outline.

::selection {
  color: red; 
  background: yellow;
}

<h1>Select some text :</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores illo porro! Voluptas facilis quos atque quod maxime adipisci deserunt alias, enim id est necessitatibus laboriosam in mollitia voluptatem illum?
In, dicta? Ipsam atque officiis repellendus. Eos, nemo? Vitae dignissimos, sapiente, sint natus velit cumque expedita optio rerum neque nam, omnis reiciendis explicabo ratione qui unde ipsa esse. Aut, minima?
Doloremque molestiae dolore quo ratione sed debitis consectetur officiis, voluptate quae voluptates enim earum maxime fuga commodi odit. Enim delectus officia impedit unde aperiam minus cupiditate, veniam expedita quaerat molestias?
Recusandae magni laboriosam similique perspiciatis praesentium labore, culpa nostrum eius dolores possimus dignissimos ducimus illo aliquam commodi rerum pariatur, itaque incidunt repudiandae. Architecto dolore necessitatibus harum perferendis veritatis neque similique!
Harum nobis commodi dolor reprehenderit sunt dolorum officia ipsum in voluptatem, quae laborum molestiae natus quia. Quos, consectetur fugit quo temporibus dolores nostrum odio aperiam debitis quas dicta quaerat impedit.
Totam excepturi fuga deserunt! Nam asperiores debitis, omnis, molestias, accusantium labore dolorum facere cum obcaecati ullam at nobis explicabo tempore. Enim eum beatae pariatur omnis neque saepe fuga? Nam, dolorem?
Quos quo laborum, labore aut maxime doloribus doloremque repellendus similique, suscipit provident aperiam odit excepturi repudiandae perspiciatis ipsam eligendi, tenetur cumque? Quae libero vel eum harum quam! Debitis, aliquam numquam.
Totam, eum assumenda minus officia, repellendus sint libero quo voluptatibus autem quam dolorem aperiam beatae! Delectus quis tempore facilis non odio accusamus, eos ducimus deserunt voluptatibus veritatis dolorem quidem sequi.
Reiciendis itaque exercitationem assumenda neque cum quod aliquam quaerat deleniti ipsum culpa, temporibus eaque facere quia molestiae perspiciatis quae consectetur enim officiis error ut. Veritatis voluptatibus molestias illo repellat sit.
Tempore nulla itaque culpa iusto eos ducimus quam quia repudiandae, perspiciatis laudantium sapiente inventore nostrum doloremque delectus similique, dolorem blanditiis velit possimus labore quidem consequuntur dolores temporibus sit eius! Quo.</p>

score 0 · Answer 3 · answered Feb 10 '21 at 11:08

0

I am answering my own question here.

I generated highlighted SVG and used as background image

answered Feb 10 '21 at 11:08

siddharth lakhara

307
1
5
12

How to change the shape of text highlighted using CSS

3 Answers3