Html 将CSS内容移动到边框上

是的，我遇到了一点问题，不确定是否可以用另一种方法解决

我需要移动

内容：“F”并将其居中放置在左上角的边框上。现在不创建另一个元素就可以了吗

HTML:

<div class="userBoxF"></div>

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.userBoxF:after {
    content: "F";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 40px solid #F385FF;
    border-right-color: transparent;
    border-bottom-color: transparent;
    font-size: 30px;
}

<div class="userBoxF">
    <div class="corner"><span>F</span></div>
</div>

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.userBoxF .corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 40px solid #F385FF;
    border-right-color: transparent;
    border-bottom-color: transparent;
    font-size: 30px;
}

.userBoxF .corner span {
    display: block;
    position: absolute;
    top: -30px;
    left: -20px;
}

我能想到的唯一方法是将角创建为一个完全独立的元素，这样我就可以将文本“F”放入一个
span
（或其他）中并将其移动


注意：此处的任何内容都不会改变长方体和角的大小、宽度和高度始终相同


这是我想要的，使用我找到的解决方案，但我不想使用

HTML:

<div class="userBoxF"></div>

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.userBoxF:after {
    content: "F";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 40px solid #F385FF;
    border-right-color: transparent;
    border-bottom-color: transparent;
    font-size: 30px;
}

<div class="userBoxF">
    <div class="corner"><span>F</span></div>
</div>

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.userBoxF .corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 40px solid #F385FF;
    border-right-color: transparent;
    border-bottom-color: transparent;
    font-size: 30px;
}

.userBoxF .corner span {
    display: block;
    position: absolute;
    top: -30px;
    left: -20px;
}

这是我提出的解决方案的一个演示，但我不想再创建更多的元素

您可以同时使用
：before
和
：after

我删除了
span
：

<div class="userBoxF">
</div>


编辑：这是一个额外的奖励！
如果你想让它更通用，如果你在
内容
中使用CSS的
attr
，你可以从类中插入“F”。例如：

<div class="userBox" data-l="F">
</div>

只需使用另一个
：psuedo
：

可以说，“F”是实际内容，因为它不是一个样式选项……它实际上表示一些东西，可能应该由屏幕阅读器（例如）读取，那么带有渐变的跨度（TL-BR）可能更合适


HTML

<div class="userBoxF">
    <span class="section-letter">F</span>
</div>

从单个伪图像中，可以使用渐变作为背景：

.userBoxF {
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.userBoxF:after {
    content:"F";
    position: absolute;
    top: 0;
    left: 0;
    text-indent:20px;
    line-height:60px;
    width:80px;
    height:80px;
    background:linear-gradient(to bottom right, #F385FF 51%, transparent 49%);
    font-size: 30px;
}

作为渐变的背景图像可以像以前一样：

：
对“F”使用
:after
，对边框使用
:before
不是一个选项？@jdo任何比我的解决方案短的东西都是一个潜在的选项。但是主要是寻找一种方法来移动文本而不创建任何新的
HTML
。页面上不会有任何新元素。
：after
和
：before
都是伪元素。@jdo提出的所有建议都是将
内容分开：“F”到
：在
CSS规则之前。可能还需要设置适当的
z-index
（因为两者都有position
absolute
@Devtrix.net啊，是的，我错过了它，谢谢你帮我澄清了这一点！是的，这是我愿意接受的一种方式。如果没有人想写它，我可以自己写。给你啊！我非常聪明+1。我只是在搞搞一些东西来找出最好的套件。我在e评论，它做了我要求的事情，不知道我为什么不做这件事。
+1
.IE8+，根据，这与很久以前的所有其他浏览器相同：
：就IE而言，在
支持之后。
attr
在所有浏览器中都不受支持，如果您在
内容
以外的地方使用它，尽管很有趣ng，谢谢！我在评论中看到了这一点，它确实符合我的要求，不知道我为什么不做这件事。
+1
。也很好！我没有想到要做这件事。
+1
，正如我在另一篇评论中所说的，我只是在我的项目中胡乱摆弄这些东西，以找到最好的套件。是的，不容易，看到渐变可以作为背景图像集为了更好的兼容性，我认为梯度并没有得到很好的支持。IE9仍然在努力解决一些问题types@ChenAsraf我之前的评论实际上是这样的：）