伪类元素的用法总结_伪类元素能设置padding嘛

作者：代码探险家 | 2024-07-18 13:34:11

踩

伪类元素能设置padding嘛

1:自闭标签不适用伪类元素

自闭合标签
1. 一般标签
由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。

<p>“绿叶，给你初恋般的感觉。”</p>

2. 自闭合标签
由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。

在HTML中，常见的自闭合标签如下表所示

项目	Value
`<meta />`	定义网页的信息（供搜索引擎查看）
`<link />`	引入“外部CSS文件”
`<br />`	换行标签
`<hr />`	水平线标签
`<img />`	图片标签
`<input />`	表单标签

实际上，::before伪元素不能直接应用于input元素上。

因为::before和::after伪元素是基于元素的内容进行插入和样式化的，而input元素是一个自封闭标签，没有实际的内容。

如果希望在input元素前方插入内容，可以考虑使用其他元素，如<label>元素。您可以将input元素包裹在一个<label>元素中，并使用::before伪元素样式化该<label>元素。

span也可以 label也行 div也行只要时非子闭合标签包裹就能解决这个问题

2：自定义分割线

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义分割线效果</title>
<style>
.custom-divider {
position: relative;
height: 2px;
background-color: #ccc;
margin: 20px 0;
}

.custom-divider::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 100%;
background-color: purple;
}
</style>
</head>
<body>
<div class="custom-divider"></div>
</body>
</html>

3：上下提示词

<style>
.form-group {
position: relative;
margin-bottom: 20px;
}

.form-group label {
position: relative;
display: block;
padding-left: 20px;
}

.form-group label::before {
content: "1 龙晶 == 1元";
font-family: "Font Awesome";
position: absolute;
left: 20px;
top: 60px;
transform: translateY(-50%);
font-size: 12px;
background-color: aqua;
padding: 5px;
}

.form-group input {
width: 100%;
height: 30px;
background-color: #ccc;
margin-top: 10px;
}
</style>

<div class="form-group">
<label>
<input type="text" id="inputField">
</label>
</div>

4：前后缀内容补充

一样的原理请读者试着做出来

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/845929