相关疑难解决方法(0)

尝试为我的css三角形(边框)使用自定义十六进制颜色.但是,由于它使用边框属性,我不确定如何去做.我想简单地因为兼容性而避开javascript和css3.我试图让三角形有一个带有1px边框的白色背景(围绕三角形的边角),颜色为#CAD5E0.这可能吗？这是我到目前为止所拥有的:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 100%;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #CAD5E0;
    border-style: solid;
    border-width: 10px;
}?

我的小提琴:http://jsfiddle.net/4ZeCz/

我读过::before用于在你使用它的元素之前添加内容,例如

p::before { 
    content: "Read this: ";
}

但是我见过的大部分时间(通过开发人员工具窥视网页)他们使用它们没有任何元素,例如

<div class="btn-toolbar" role="toolbar">
      ::before
      <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
      </div>
      ::after
    </div>

令人惊讶的是,当您查看网页源代码时,这些::before或::after元素不会显示.

为什么它们显示在开发人员工具中？