CODEWITHSUNDEEP
htmlcssfonts
Sri
Sri

Reputation: 631

To Add bg color inside the space of an single letter in a word

I want to add color for an single letter which have space in a word.

For example if we have a word name 'Does' I need to fill the color for the letter 'o' and 'e' in which i need the color inside the space of the letter I want the bg color inside the space of a letter thats my requirement.

I have attached a image in that check the letter 'o,B,P'which have bg color inside the space.check this image

Upvotes: 2

Views: 2038

Answers (1)

connexo
connexo

Reputation: 56753

It is perfectly possible, even using css only, but you will have to create a customized solution for every letter and font, and you must wrap the letters which need this CSS in spans and give them the appropriate classes.

Check the pen:

http://codepen.io/anon/pen/LVRLap

h1 {
  font-size: 100px;
  font-family: Verdana;
}
.fill-letter {
  position: relative;
}
.fill-letter:after {
  display: block;
  content: "";
  position: absolute;
}
.o:after {
  background-color: orange;
  height: 45%;
  left: 25%;
  top: 30%;
  width: 50%;
  z-index: -1;
}
<h1>H<span class="fill-letter o">O</span>ME</h1>

Upvotes: 5

Related Questions