CODEWITHSUNDEEP
css
Philipp Lenssen
Philipp Lenssen

Reputation: 9218

CSS underline disappears when opacity is used

In current stable Chrome, when using the following CSS where some opacity is set, the underline on the text disappears. When the opacity is set to 1 or removed, the underline shows fine. Help please? Thanks!

@import url('//fonts.googleapis.com/css?family=Press+Start+2P');
p {
  font-family: 'Press Start 2P';
  text-decoration: underline;
  opacity: 0.5;
}
<p>Hello World</p>

Upvotes: 3

Views: 408

Answers (1)

Matthias Reumann
Matthias Reumann

Reputation: 151

Instead of opacity you should set color with the CSS rgba() function:

@import url('//fonts.googleapis.com/css?family=Press+Start+2P');
p {
  font-family: 'Press Start 2P';
  text-decoration: underline;
  color: rgba(0, 0, 0, 0.5);
}
<p>Hello World</p>

Upvotes: 9

Related Questions