It’s a good question. You can use the before-after psuedo selectors for to manupilate a HTML file from a CSS file.That’s why we have to use ‘content’ attribute when using before-after selectors.
Solution 1 :
Solution 2 :
Quick edit : Just copy and paste the code below…
[duplicate]
Is it possible to have an :after pseudo element on a button?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button before / after</title>
<style>
body{
font-family:sans-serif;
font-size: 1.4em
}
button::before{
content:"grocery store : ";
background-color:blanchedalmond;
border:1px solid #000000;
}
button::after{
content:" (available)";
background-color:bisque;
}
</style>
</head>
<body>
<h1>button ::before - ::after</h1>
<button id="button_1">Spam</button><br>
<button id="button_2">Parrot</button><br>
<button id="button_3">Ex-parrot</button><br>
<button id="button_4">Eggs and spam</button><br><br>
<div id="output">Click on a button</div>
<script>
function addListeners(){
button_1.addEventListener("click", onMouseClick);
button_2.addEventListener("click", onMouseClick);
button_3.addEventListener("click", onMouseClick);
button_4.addEventListener("click", onMouseClick);
button_1.addEventListener("mouseleave", onMouseLeave);
button_2.addEventListener("mouseleave", onMouseLeave);
button_3.addEventListener("mouseleave", onMouseLeave);
button_4.addEventListener("mouseleave", onMouseLeave);
}
function onMouseClick(e){
output.innerHTML = (e.target.innerHTML);
// or
// output.innerHTML = (e.target.id + " clicked");
}
function onMouseLeave(e){
output.innerHTML = ("Click on a button");
}
addListeners();
</script>
</body>
</html>
Problem :
What happens when one adds a before and an after psuedo selector to a button element?
I tried it already but couldn’t really make anything out of it. New to web dev.
Comments
Comment posted by edit
Your answer could be improved with additional supporting information. Please
Comment posted by Paulie_D
Links are not buttons
Comment posted by tatactic
@Paulie_D Indeed, and English is not my cup of tea, Sorry, I just read the question again. 😀