Add "

Question

The output on ':hover' is always "1IPSUM" If I decide to add a ':before' element with the content 'content:"1"', it just adds a 1, making the output before hover as "11" "The output I want is: The output on 'hover' is "IPSUM" Fiddle: https://jsfiddle.net/Zxdfvv/u9xgoks3/.btn:hover:a

P粉275883973 · Answer

Thank you, EmSixTeen! I'm in school, so I can't log into my account. Do pseudo-elements work correctly on different browsers?

P粉715304239 · Answer

You are setting content: for the pseudo-element, not for the element itself. That's why when you add something to ::before it appears before the element text, and then if you use ::after it appears after the element text.

You can use pseudo elements to set the initial text. So you can do this:

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background-color: #006400;
  display: grid;
  place-items: center;
}

main {
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.btn {
  border: 3px solid black;
  text-align: center;
  border-radius: 20px;
  letter-spacing: 2px;
  padding: 1em 1.5em;
  background-color: #ffd700;
  color: black;
  font-family: monospace;
  display: inline-block;
  margin: 1em;
}

.btn::after {
  display: inline-block;
}

.btn--empty::after {
  content: "";
}

.btn--pseudo::after {
  content: "lorem";
}
.btn:hover::after {
  content: "ipsum";
}