css---6僞元素選擇器

時間 2019-11-24

標籤 css 元素選擇器欄目 CSS 简体版

原文原文鏈接

after :在內容後邊css

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

content after

before 在內容的前面html

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

content before

First-Lette 第一個字母ide

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Letter</title>
<style type="text/css">
div {
    width: 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 所有一行spa

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Line</title>
<style type="text/css">
div {
    width: 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 選擇顏色會變code

<!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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。