Example code for CSS to achieve horizontal lines on both sides of the text

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

Detailed explanation of the difference between url ending with / and without / in nginx proxy_pass configuration

When nginx configures proxy_pass, the difference ...

Detailed explanation of web page loading progress bar (recommended)

(When a web page is loading, sometimes there is t...

Deploy grafana+prometheus configuration using docker

docker-compose-monitor.yml version: '2' n...

Node quickly builds the backend implementation steps

1. First install node, express, express-generator...

Vue implements left and right sliding effect example code

Preface The effect problems used in personal actu...

Automatically install the Linux system based on cobbler

1. Install components yum install epel-rpm-macros...

How Database SQL SELECT Queries Work

As Web developers, although we are not profession...

Steps to package and release the Vue project

Table of contents 1. Transition from development ...

Vue.js implements tab switching and color change operation explanation

When implementing this function, the method I bor...

Docker renames the image name and TAG operation

When using docker images, images with both REPOSI...

Deep understanding of the use of ::before/:before and ::after/:after

Part 1: Basics 1. Unlike pseudo-classes such as :...

JavaScript style object and CurrentStyle object case study

1. Style object The style object represents a sin...

Baidu Input Method opens API, claims it can be ported and used at will

The relevant person in charge of Baidu Input Metho...

Vue based on Element button permission implementation solution

Background requirements: The ERP system needs to ...

Detailed explanation of several ways to install CMake on Ubuntu

apt install CMake sudo apt install cmake This met...