伪类元素的用法总结

最新推荐文章于 2024-07-29 10:40:54 发布

<阿睿>

最新推荐文章于 2024-07-29 10:40:54 发布

阅读量787

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_45288176/article/details/130852837

版权

文章讨论了自闭合标签在HTML中的使用，如<meta>,<br/>,<img/>等，并指出::before伪元素不能直接用于input元素，因为input是自闭合标签，没有内容区域。建议使用<label>元素结合::before伪元素来实现内容插入。此外，还展示了自定义分割线和上下提示词的CSS实现示例。

摘要由CSDN通过智能技术生成

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>