对齐CSS内容标记添加的图像

Question

我想在div元素中添加一个复选框。使用content:before标记可以轻松完成。所以这个css

.btn {
    border: 1px solid #606060;
    background: #e3e3e3;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    -moz-box-shadow:    inset 0 0 5px #38414d;
    -webkit-box-shadow: inset 0 0 5px #38414d;
    box-shadow:         inset 0 0 5px #38414d;
    cursor: pointer;
    text-align: center;
    width: 200px;
    height: 55px;
    line-height: 55px;
}


.btn:before {
    content:url(http://tinyurl.com/pmrqpon);
}

结果这个按钮。

问题是这个新的内容元素是由css动态添加的。但我需要将其放在div 中，而不更改“按钮”文字的位置。我如何才能实现此目标？

Answer 1

您可以像这样更改代码：

.btn {
    ...
    position: relative;
}

.btn:before {
    ...
    position: absolute;
    top: 10px;
    right: 10px;
}

Answer 2

你必须绝对定位伪元素。

<强> JSFiddle Demo

<强> HTML

按键

<强> CSS

.btn {
    border: 1px solid #606060;
    background: #e3e3e3;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    -moz-box-shadow:    inset 0 0 5px #38414d;
    -webkit-box-shadow: inset 0 0 5px #38414d;
    box-shadow:         inset 0 0 5px #38414d;
    cursor: pointer;
    text-align: center;
    width: 200px;
    height: 55px;
    line-height: 55px;
    position:relative;
}

.btn:before {
    content:url(http://tinyurl.com/pmrqpon);
    position:absolute;
    top:0;
    left:20%; **(adjust as required)**
}