CODEWITHSUNDEEP
htmlcss
The Impaler
The Impaler

Reputation: 48820

Decorate words with type using CSS

Is it possible to decorate the words using CSS only to get this result? I need to underline them with different colors, and add the type as text (in CSS).

enter image description here

Ideally, the HTML content should not be touched but I could do minor changes to it:

<p>
  <span class="xart">The</span>
  <span class="xadj">big</span>
  <span class="xn">house</span>.
</p>

What should I add to the CSS styles?

.xart { text-decoration: underline; text-decoration-color: blue; }
.xadj { text-decoration: underline; text-decoration-color: green }
.xn { text-decoration: underline; text-decoration-color: bred; }

Upvotes: 1

Views: 357

Answers (2)

mplungjan
mplungjan

Reputation: 178126

Modifying CSS - Multiple text-decorations with style and color

span {
    position: relative;
}
span.art:after {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    text-align:center;
    content: 'art'; 
    color:blue;
    border-top: 2px solid blue;
    top: 20px;
}
span.adj:after {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    text-align:center;
    content: 'adj'; 
    color:green;
    border-top: 2px solid green;
    top: 20px;
    left: 2px
}
span.n:after {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    text-align:center;
    content: 'n'; 
    color:red;
    border-top: 2px solid red;
    top: 20px;
    left: 2px
}
<span class="under art">The</span> <span class="under adj">big</span> <span class="under n">house</span>

Upvotes: 1

Peter
Peter

Reputation: 624

I would add the styles you are looking for in the following way.

.xart {
	padding-bottom: 3px;
	display: inline-block;
}
.xart:after {
	content: 'art';
	display: block;
	border-top: 2px solid blue;
}

.xadj {
	padding-bottom: 3px;
	display: inline-block;
}
.xadj:after {
	content: 'adj';
	display: block;
	border-top: 2px solid green;
}

.xn {
	padding-bottom: 3px;
	display: inline-block;
}
.xn:after {
	content: 'n';
	display: block;
	border-top: 2px solid red;
}
<p>
  <span class="xart">The</span>
  <span class="xadj">big</span>
  <span class="xn">house</span>.
</p>

Upvotes: 2

Related Questions