html - 图标或图像居中，两边有线

Question

我正在尝试创建一些 CSS 以在中心有一个图标或图像，两边都有一条线，但似乎我做错了什么，需要一些帮助。

为简单起见，我只在代码中使用了一个星号。

<div class='line-container'><div class='line-icon'>*</div></div>

.line-icon {
text-align: center;
}

.line-icon::before {
width: 25%;
height: 1px;
border: 1px solid #ccc;
}

.line-icon::after {
width: 25%;
height: 1px;
border: 1px solid #ccc;
}

Answer 1

尝试向您的 ::after 和 ::before 添加内容，并设置其显示:

.line-icon {
    text-align: center;
}

/* Joined both selectors, since were pretty much the same */
.line-icon::before,
.line-icon::after {      
    /* Styles kept */
    width: 25%;
    height: 1px;

    /* Changed to border-top (instead of border) to simulate a line better */
    border-top: 1px solid #ccc; 

    /* Styles added */
    display: inline-block;
    content: '';
  
    /* Use padding to vertical align the line */
    /* Use padding in em for a responsive icon height */
    padding-top: 0.5em; 
  
    /* Use margins to give the lines some spacement around the icon */
    /* Use margins in % for a responsive spacement */
    margin-left: 5%; 
    margin-right: 5%;
}

<div class='line-container'><div class='line-icon'>*</div></div>