CSS中的橫向虛擬非常實用，可以實現許多美觀的效果，比如文字中的虛線，圖表的坐標軸等等。下面我們來了解一下如何使用CSS實現橫向虛擬。

/* 以下代碼實現的是文字中的橫向虛線 */
hr{
border: none;
border-bottom: 1px dashed #ccc;
margin: 15px 0;
}

上面的代碼將網頁默認的水平線樣式全部去除，并且將底部邊框設置為1像素虛線，顏色為灰色。margin屬性用于控制橫線與其他元素之間的距離，可以根據實際情況進行調整。

/* 以下代碼實現的是圖表中的橫向坐標軸 */
.axis-x{
position: absolute;
bottom: 0;
left: 50px;
width: calc(100% - 100px);
border-bottom: 1px solid #999;
}
.axis-x::before{
content: "";
position: absolute;
left: 0;
top: -10px;
width: 10px;
height: 10px;
border-top: 1px solid #999;
border-left: 1px solid #999;
transform: rotate(-45deg);
}
.axis-x span{
display: inline-block;
position: absolute;
line-height: 1;
bottom: -25px;
transform: translateX(-50%);
}

上面的代碼是實現一個底部有坐標數字的橫向坐標軸。首先設置.axis-x的樣式，將其定位在頁面底部，并且寬度為頁面寬度減去左右兩邊的空白。border-bottom屬性將其底部邊框設置為1像素實線，顏色為灰色。其中::before偽元素用于實現坐標軸的起點小箭頭，通過transform屬性將其旋轉45度并且傾斜出小箭頭。坐標數字通過設置position為absolute，bottom為負值以實現定位在坐標軸底部，同時通過transform屬性將其水平垂直居中。

以上就是CSS橫向虛擬的實現方法。