ダミークラスを使用してタイトルの両側に装飾線を追加
8205 ワード
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.container{
width: 1000px;
margin: 10px auto;
border: 1px solid red;
}
h3.title {
color: #F2AE11;
font-size: 1.3em;
margin-bottom: 3em;
text-align: center;
font-weight: 500;
line-height: 1.1;
}
h3.title span {
display: block; /* */
font-size: 3em;
color: #212121;
position: relative; /* （ ）*/
}
h3.title span:before, h3.title span:after {
content: ''; /*CSS */
position: absolute; /* */
top: 52%;
background: #494949; /* */
width: 9%;
height: 2px;
}
h3.title span:before{
left: 25%; /* */
}
h3.title span:after {
right: 25%;
}
style>
head>
<body>
<div class="container">
<h3 class="title">Welcome to <span>Snapshotspan>h3>
<div class="row">
div>
div>
body>
html>転載先:https://www.cnblogs.com/supe/p/6667902.html