垂直对齐一个伪元素

Question

我试图用伪元素创建的线垂直穿过旋转的正方形。

.marker{
    display: block;
    width: 16px;
    height: 16px;
    border: solid 2px #896f56;
    transform: rotate(45deg);
}

.marker:before{
    content: "";
    width: 2px;
    height: 40px;
    background-color: #896f56;
    display: block;
    transform:rotate(-45deg);
    margin-left: 19px;
}

https://jsfiddle.net/npvfu3ff/

但是旋转规则会影响伪元素，使其难以定位。

这是我需要的图片：

Answer 1

更改了执行方式，使其自动居中

.marker{
 display: block;
 width: 16px;
 height: 16px;
 border: solid 2px #896f56;
 transform: rotate(45deg);
     margin-top: 30px;
}

.marker:before{
 content: "";
 width: 2px;
 height: 40px;
 background-color: #896f56;
    display: block;
    margin: auto;
    margin-top: 50%;
    transform:rotate(-45deg) translatey(-50%);
    transform-origin: top center;
}

<div class="marker"></div>

Answer 2

我通过对正方形和直线使用 :before 和 :after 将标记线从旋转中分离出来，因此它们不会相互影响。

https://jsfiddle.net/wmqhd72u/

.maker2 {
    position: relative;
}
.maker2:hover:before {
    transform: rotate(405deg);
}
.maker2:before,
.maker2:after {
    position: absolute;
}
.maker2:before {
    display: block;
    content: "";
    width: 16px;
    height: 16px;
    border: solid 2px #896f56;
    top: 0;
    left: 0;
    transform: rotate(45deg);
    transition: all 2s;
}
.maker2:after {
    content: "";
    position: relative;
    top: -8px;
    left: -8px;
    width: 2px;
    height: 40px;
    background-color: #896f56;
    display: block;
    margin-left: 19px;
    top: 8px;
    left: -10px;
}

垂直对齐一个伪元素

Align vertically a pseudo-element

css

css-transforms