Example code for CSS to achieve horizontal lines on both sides of the text
|
This article introduces the sample code of CSS to achieve the effect of horizontal lines on both sides of the text center, and shares it with you. The specific notes are as follows: Effect:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.title{
text-align: center;
position: relative;
height: 50px;
line-height: 50px;
width: 800px;
margin: 200px auto;
}
.title:after,.title:before{
content: "";
position: absolute;
top: 50%;
background: #7a7a7a;
height: 1px;
width: 35%;
}
.title:after{
left: 0;
}
.title:before{
right: 0;
}
</style>
</head>
<body>
<div class="title">CSS to achieve the effect of horizontal lines on both sides of the text center</div>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Steps to restore code from a Docker container image
>>: H tags should be used reasonably in web page production
Recommend
JavaScript to implement dynamic digital clock
This article shares the specific code for impleme...
HTML Grammar Encyclopedia_HTML Language Grammar Encyclopedia (Must Read)
Volume Label, Property Name, Description 002 <...
The difference between the four file extensions .html, .htm, .shtml and .shtm
Many friends who have just started to make web pag...
Instructions for using the --rm option of docker run
When the Docker container exits, the file system ...
A brief summary of my experience in writing HTML pages
It has been three or four months since I joined Wo...
Several scenarios for using the Nginx Rewrite module
Application scenario 1: Domain name-based redirec...
js development plug-in to achieve tab effect
This article example shares the specific code of ...
CSS to achieve zoom in and out close button (example code)
This effect is most common on our browser page. L...
Analysis of the principle of Nginx+Tomcat to achieve load balancing and dynamic and static separation
1. Implementation principle of Nginx load balanci...
Windows Server 2012 No Remote Desktop License Server can provide a license, and the remote session is disconnected
Today, when I logged into the company's inter...
Some CSS questions you may be asked during an interview
This article is just to commemorate those CSS que...
Add unlimited fonts to your website with Google Web Fonts
For a long time, website development was hampered...
Java imports data from excel into mysql
Sometimes in our actual work, we need to import d...
CSS to achieve compatible text alignment in different browsers
In the front-end layout of the form, we often nee...
Simple analysis of EffectList in React
Table of contents EffectList Collection EffectLis...