在按钮元素中添加一个prefore和after-psuedo选择器时会发生什么？
我已经尝试过了，但无法真正从中获得任何东西。网络开发新手。
这是个好问题。您可以使用的before-after-psuedo选择器从CSS文件中手工创建HTML文件。这就是为什么我们在使用前后选择器时必须使用"content"属性。
快速编辑：只需复制并粘贴下面的代码。。。[副本]按钮上有可能有一个：after伪元素吗？
<!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>
链接：https://www.w3schools.com/cssref/sel_before.php