Summary of various methods of implementing article dividing line styles with CSS

Summary of various methods of implementing article dividing line styles with CSS

This article summarizes various ways to implement article dividing lines in CSS. Dividing lines can beautify the page, so let's take a look at various ways to use CSS to implement dividing line styles. The effect is as follows:

Method 1: Use a single label to implement a separator line:

html:

<div class="line_01">Single label implementation of small separator line</div>

css:

.demo_line_01{  
    padding: 0 20px 0;  
    margin: 20px 0;  
    line-height: 1px;  
    border-left: 190px solid #ddd;  
    border-right: 190px solid #ddd;  
    text-align: center;  
}

Advantages: concise code

Method 2: Use background color to create separator lines:

html:

<div class="line_02"><span>Small dividing line cleverly implemented with color</span></div>

css:

.demo_line_02{  
    height: 1px;  
    border-top: 1px solid #ddd;  
    text-align: center;  
}  
.demo_line_02 span{  
    position: relative;  
    top: -8px;  
    background: #fff;  
    padding: 0 20px;  
}

Advantages: concise code, adaptive width

Method 3: inline-block to implement separator line:

html:

<div class="line_03"><b></b><span>Small separator line inline-block implementation</span><b></b></div>

css:

.demo_line_03{  
    width:600px;  
}  
.demo_line_03 b{  
    background: #ddd;  
    margin-top: 4px;  
    display: inline-block;  
    width: 180px;  
    height: 1px;  
    _overflow:hidden;  
    vertical-align: middle;  
}  
.demo_line_03 span{  
    display: inline-block;  
    width: 220px;  
    vertical-align: middle;  
}

Method 4: Floating to achieve separator line:

html:

<div class="line_04"><b></b><span>The small separator line floats to achieve</span><b></b></div>

css:

.demo_line_04{  
    width:600px;  
}  
.demo_line_04{  
    overflow: hidden;  
    _zoom: 1;  
}  
.demo_line_04 b{  
    background: #ddd;  
    margin-top: 8px;  
    float: left;  
    width: 26%;  
    height: 1px;  
    _overflow:hidden;  
}

Method 5: Use characters to implement separators:

html:

<div class="line_05">———————————<span>Small separator character to achieve</span>————————————</div>

css:

.demo_line_05{  
    letter-spacing: -1px;  
    color: #ddd;  
}  
.demo_line_05 span{  
    letter-spacing: 0;  
    color: #222;  
    margin:0 20px;  
}

Advantages: The code is concise. The above briefly introduces how to write separators. There may be other more appropriate ways to write them, depending on the environment!

This concludes this article about the various methods of implementing article dividing line styles with CSS. For more relevant CSS dividing line style content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  Detailed steps to install RabbitMQ in docker

>>:  Angular Cookie read and write operation code

Recommend

Implementation of tomcat deployment project and integration with IDEA

Table of contents 3 ways to deploy projects with ...

Two solutions for Vue package upload server refresh 404 problem

1: nginx server solution, modify the .conf config...

Detailed explanation of MySQL cumulative calculation implementation method

Table of contents Preface Demand Analysis Mysql u...

How to use the dig/nslookup command to view DNS resolution steps

dig - DNS lookup utility When a domain name acces...

Installation and configuration method of Zabbix Agent on Linux platform

Here is a brief summary of the installation and c...

Using js to achieve waterfall effect

This article example shares the specific code of ...

JS realizes video barrage effect

Use ES6 modular development and observer mode to ...

MySQL 5.5 installation and configuration graphic tutorial

Organize the MySQL 5.5 installation and configura...

Enter the style file for the automatic search suggestion function: suggestion.css

Copy code The code is as follows: .sugLayerDiv{ p...

Some experience in building the React Native project framework

React Native is a cross-platform mobile applicati...

MySQL Practical Experience of Using Insert Statement

Table of contents 1. Several syntaxes of Insert 1...

Example code for converting http to https using nginx

I am writing a small program recently. Because th...

About the layout method of content overflow in table

What is content overflow? In fact, when there is ...

CSS selects the first child element under the parent element (:first-child)

Preface I recently used :first-child in a project...

Learn the common methods and techniques in JS arrays and become a master

Table of contents splice() Method join() Method r...