垂直对齐伪元素

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

改变了这样做的方式，使其自动居中

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;
}