The output on ':hover' is always
“1IPSUM”
If I decide to add a ':before' element with content 'content:"1"', it will just add a 1, making the output before hover to be "11"
The output I want is:
The output on 'hover' is "IPSUM"
Fiddle: https://jsfiddle.net/Zxdfvv/u9xgoks3/
.btn:hover:after {
padding-bottom: 200px;
content:"IPSUM";
}
<div class='btn'>1</div>
P粉2758839732023-09-10 10:42:23
Thank you, EmSixTeen! I'm in school, so I can't log into my account. Do pseudo-elements work correctly on different browsers?
P粉7153042392023-09-10 09:12:42
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";
}
<html>
<body>
<main>
<a class="btn btn--empty" href="#"></a>
<a class="btn btn--pseudo" href="#"></a>
</main>
</body>
</html>