How are angle characters being added to this button's text with CSS on hover?

user_16563486 0
Viewed 114

I came across the following code on W3Schools. It has a hover effect; when you hover over the button, it becomes Hover>> and the last two characters, >>, are automatically added when hovered over. I don't see any HTML code for that. Where did it come from? Does it have a separate code in HTML/CSS? I mean, there is no "text" for >> whereas there is text for "Hover"

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
</head>
<body>


<button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>
</html>

hover button css html
2 Answers

The "magic lines" are the two lines:

.button span:after {
  content: '\00bb';

The HTML code 00bb is the character ».

user_161677510

CSS rules for pseudo-elements must have a content property or they simply don't appear in the page. In most cases it's an empty string because the thing doesn't contain text and is styled in other ways. In this case it actually contains an HTML entity code.

.button span:after {
  content: '\00bb'; /* <-- Here's your huckleberry. */
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

Here's the list

To use that character directly in your HTML you'd use its name with an ampersand: &raquo;

user_12648040
Related