2017-12-21 145 views
10

CSS: set dòng CSS

.banner-bottom h2 { 
 
    font-size: 2em; 
 
    color: #372568; 
 
    position: relative; 
 
    padding-bottom: 1em; 
 
    text-align: center; 
 
} 
 

 
.banner-bottom h2:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 25%; 
 
    background: #372568; 
 
    height: 2px; 
 
    width: 8%; 
 
} 
 

 
.banner-bottom h2:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 25%; 
 
    right: 25%; 
 
    background: #372568; 
 
    height: 2px; 
 
    width: 8%; 
 
}
<div class="banner-bottom"> 
 
    <div class="container"> 
 
    <h2>Special Promo</h2> 
 
    <h2>Promo</h2> 
 
    <div> 
 
     <div>

Kết quả:

enter image description here

Làm thế nào để css dòng của nó theo chiều dài của văn bản ví dụ như sau:

enter image description here

+0

Tôi không thấy kết quả tương tự như ảnh chụp màn hình của bạn. Tôi nhận được https://i.stack.imgur.com/2IcrP.png. – TRiG

Trả lời

5

Thiết display giá trị tài sản để inline-block là tốt để đi với như @Vinothin đã trả lời cho bạn. Đây là một mẹo khác mà bạn có thể sử dụng.

Sử dụng transform thuộc tính sẽ giúp bạn khi sử dụng vị trí tuyệt đối.

.banner-bottom h2 { 
 
    font-size: 2em; 
 
    color: #372568; 
 
    position: relative; 
 
    padding-bottom: 1em; 
 
    text-align: center; 
 
} 
 

 
.banner-bottom h2:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 25%; 
 
    transform: translateX(-100%); 
 
    /* no left value is required */ 
 
    background: #372568; 
 
    height: 2px; 
 
    width: 8%; 
 
} 
 

 
.banner-bottom h2:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 25%; 
 
    /* no right value is required */ 
 
    background: #372568; 
 
    height: 2px; 
 
    width: 8%; 
 
}
<div class="banner-bottom"> 
 
    <div class="container"> 
 
    <h2>Special Promo</h2> 
 
    <h2>Promo</h2> 
 
    </div> 
 
</div>

Nếu bạn cần khoảng cách trước và sau chữ sau đó chơi với các dịch giá trị bằng cách tăng hoặc giảm nó.


Sử dụng transform tài sản sẽ giúp bạn rất nhiều trong tương lai. Giả sử bạn có một danh sách ở giữa và bạn cần phải đặt biểu tượng trái giữa vào danh sách, sau đó chỉ cần transform lừa. Tôi đã thông báo mẹo này vì tôi cũng đã phải đối mặt với vấn đề tương tự trước đây.

Hy vọng điều này sẽ hữu ích!

+0

cảm ơn bạn đã giúp đỡ tôi rất nhiều :)) – illogic

+0

Đó là niềm vui của tôi. –

8

Hãy thử điều này:

.banner-bottom h2 { 
 
    font-size: 2em; 
 
    color: #372568; 
 
    padding-bottom: 1em; 
 
    text-align: center; 
 
} 
 

 
.line:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    background: #372568; 
 
    height: 2px; 
 
    width: 8%; 
 
    margin: 10px; 
 
} 
 

 
.line:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    background: #372568; 
 
    height: 2px; 
 
    width: 8%; 
 
    margin: 10px; 
 
} 
 
.promo { 
 
    display: inline-block; 
 
}
<div class="banner-bottom"> 
 
    <div class="container"> 
 
    <h2><span class="line"><span class="promo">Special Promo</span></span></h2> 
 

 
    <h2><span class="line"><span class="promo">Promo</span></span></h2> 
 
    <div> 
 
<div>

+0

'


' có phù hợp hơn '' ở đây không? – Bergi

+0

@Bergi: Không, bởi vì [một tiêu đề không thể chứa một giờ] (https://checker.html5.org/?showsource=yes&doc=data%3Atext%2Fhtml%3Bcharset%3Dutf-8%2C%3C%21DOCTYPE+html % 3E% 3Ctitle% 3E% 26lt% 3Bhr% 3E + trong + tiêu đề% 3C% 2Ftitle% 3E% 250A% 3Ch2% 3E% 3Chr% 3E% 3C% 2Fh2% 3E). hr chỉ có nghĩa là được sử dụng như một bộ tách phân đoạn khi không thể sử dụng các phần tử và phần đầu đề. Việc sử dụng nó như là một "quy tắc ngang" theo nghĩa đen đã không được chấp nhận, vì những lý do hiển nhiên. – BoltClock

+0

@BoltClock Rất tiếc, làm thế nào tôi có thể bỏ lỡ nó được đặt * bên trong * tiêu đề. Cảm ơn! – Bergi

Các vấn đề liên quan