时间戳

首页 > 解决方案 > ASCII 和 CSS（无 JavaScript）

html - ASCII 和 CSS（无 JavaScript）

问题描述

我有个问题。是否可以在不使用 JavaScript 的情况下用“-”和“+”等 ASCII 符号替换标准 CSS 边框？我想在盒子周围画边框并使用 ASCII 符号来设置我的网站的样式。边框应如下所示：

+-----------+
|           |
+-----------+

到目前为止，我发现的唯一解决方案是对 HTML 内的边框进行“硬编码”，但我希望它更具动态性。

标签： htmlcssstylesheet

解决方案

使用after& beforeCSS

.box {
    height: 150px;
    width: 200px;
    border: 2px dashed red;
    margin: 0 auto;
    position: relative;
}

.box::after {
    content: "+";
    position: absolute;
    left: -6px;
    top: -13px;
    font-weight: bold;
    font-size: 18px;
    color: red;
}

.box::before {
    content: "+";
    position: absolute;
    right: -6px;
    top: -13px;
    font-weight: bold;
    font-size: 18px;
    color: red;
}

.box .inner::after {
    content: "+";
    position: absolute;
    left: -6px;
    bottom: -11px;
    font-weight: bold;
    font-size: 18px;
    color: red;
}

.box .inner::before {
    content: "+";
    position: absolute;
    right: -6px;
    bottom: -11px;
    font-weight: bold;
    font-size: 18px;
    color: red;
}
<div class="box">
    <div class="inner">
    
    </div>
</div>

推荐阅读