zoukankan html css js c++ java

css---6伪元素选择器

after :在内容后边

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>after</title>
<style type="text/css">
div {
     300px;
    height: 100px;
    border: 1px solid #000;
}
div::after {
    content: "我在内容的后面";
}
</style>
</head>
<body>
<div>伪元素fgdddddddddddddddddddddddddddddd</div>
</body>
</html>

content after

before 在内容的前面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before</title>
<style type="text/css">
div {
     300px;
    height: 100px;
    border: 1px solid #000;
}
div::before {
    content: "我在内容的前面";
}
</style>
</head>
<body>
<div>伪元素</div>
</body>
</html>

content before

First-Lette 第一个字母

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Letter</title>
<style type="text/css">
div {
     500px;
    margin: 0 auto;
    font-size: 12px;
}
div::first-letter {
    color: #f00;
    font-size: 24px;
    font-weight: bold;
}
</style>
</head>
<body>
    <div>sssss</div>
</body>
</html>

View Code

First-Line 全部一行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Line</title>
<style type="text/css">
div {
     500px;
    margin: 0 auto;
}
div::first-line {
    color: #f00;
    font-weight: bold;
}
</style>
</head>
<body>
<div>
    sssss<br>
    sssss<br>
    sssss<br>
</div>
</body>
</html>

first Line

::selection 选择颜色会变

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selection</title>
<style type="text/css">
div::selection {
    background: red;
    color: pink;
}
</style>
</head>
<body>
<div>SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection</div>
</body>
</html>

View Code

查看全文

相关阅读:
自定义view的一些问题
 爬取基金持有股票并存进数据库
 python读取配置文件
 Linux防火墙
 解决vue微信浏览器H5页面ajax请求后无法播放问题
 解决微信浏览器页面超出一块儿问题
 iOS Safari浏览器上iframe overflow: scroll元素无法滑动bug解决方法整理
 vue html2canvas 实现截图功能
 解决html2canvas截图生成的图片偏移不完整
 使用Hilo做H5接金币接红包小游戏

原文地址：https://www.cnblogs.com/hack-ing/p/11764234.html