CSS 中線是指在文字或圖像中央位置畫一條線,這在設計中常常用來劃分內容或提示信息。下面是一個簡單的例子:
/* 定義中線樣式 */ .mid-line { position: relative; height: 0; border-top: 1px solid #000; } /* 給文字添加中線 */ h1 { display: inline-block; position: relative; } h1:after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: -1; width: 100%; height: 1px; background: #000; } /* 給圖像添加中線 */ img { display: block; margin: 0 auto; position: relative; } img:after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: -1; width: 100%; height: 1px; background: #000; }
以上代碼中,我們首先定義了中線樣式,通過設置高度為 0,邊框為 1 像素實現了一條細線。然后分別給文字和圖像添加中線,對于文字,我們設置了 h1 的偽元素 after,通過絕對定位把中線添加到文字的背景下方。對于圖像,我們為其添加一個 after 偽元素,然后通過設置絕對左右定位、上方居中定位,把中線添加到圖像的中心位置。
上一篇css中給div定顏色
下一篇css中給圖片加特效