在线的中间画一条线

如何解决在线的中间画一条线

我想知道如何使用 CSS(3)（如果需要，使用 javascript）实现此图像。

有什么想法吗？

解决方法

有很多方法可以做到这一点 - 但由于您的线条高度超过 1 个像素，并且在两条线的两端都有圆形末端 - 我会将它作为 <table> <tfoot> <tr class="cart-subtotal"> <th>مجموع سبد خرید</th> <td><span class="woocommerce-Price-amount amount"><bdi>۱۲۳,۰۰۰<span class="woocommerce- Price-currencySymbol">تومان</span></bdi></span></td> </tr> <tr class="woocommerce-shipping-totals shipping"></tr> <tr data-title="حمل و نقل"></tr> <tr id="shipping_method" class="woocommerce-shipping-methods"></tr> <tr class="titleshippng"> <td> <h4>انتخاب شیوه ارسال</h4> </td> <td> </td> </tr> <tr class="shipmethod"><td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate1" value="flat_rate:1" class="shipping_method" checked="checked"><label for="shipping_method_0_flat_rate1">پیک موتوری ( فقط برای شهر تهران - مدت زمان تحویل مرسوله حداکثر یک روز کاری): <span class="woocommerce-Price-amount amount"><bdi>۱۵,۰۰۰<span class="woocommerce-Price-currencySymbol">تومان</span></bdi></span></label></td><td></td></tr> <tr class="shipmethod"><td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate2" value="flat_rate:2" class="shipping_method"><label for="shipping_method_0_flat_rate2">پست سفارشی ( مدت زمان تحویل مرسوله ۳ الی ۷ روز کاری): <span class="woocommerce-Price-amount amount"><bdi>۱۳,۰۰۰<span class="woocommerce-Price-currencySymbol">تومان</span></bdi></span></label></td><td></td></tr> <tr class="shipmethod"><td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate3" value="flat_rate:3" class="shipping_method"><label for="shipping_method_0_flat_rate3">پست پیشتاز ( مدت زمان تحویل مرسوله ۲ الی ۴ روز کاری): <span class="woocommerce-Price-amount amount"><bdi>۱۸,۰۰۰<span class="woocommerce-Price-currencySymbol">تومان</span></bdi></span></label></td><td></td></tr> <tr class="shipmethod"><td><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate5" value="flat_rate:5" class="shipping_method"><label for="shipping_method_0_flat_rate5">پیک فوری یک الی دو ساعته ( فقط برای شهر تهران در روز و ساعت کاری - هزینه پیک در مقصد و از مشتری دریافت میشود.)</label></td><td></td></tr> <tr class="order-total"> <th>مجموع</th> <td><strong><span class="woocommerce-Price-amount amount"><bdi>۱۳۸,۰۰۰<span class="woocommerce-Price-currencySymbol">تومان</span></bdi></span></strong> </td> </tr> </tfoot> 使用居中文本。>

请注意，当使用 position:absolute 定位元素时 - 您需要应用 position: relative 相对于父元素。同样 - 您需要将线伪元素偏移其高度的一半 - 以便将它们垂直居中。

::before and ::after pseudo-elements

.wrapper {
 text-align: center;
 position: relative;
}

span {
  display: inline-block;
  width: 10%;
  font-size: 20px;
  font-weight: bold
}

.wrapper::before,.wrapper::after {
  content: ' ';
  display: block;
  position: absolute;
  top: calc(50% - 3px);
  width: 45%;
  background: black;
  border-radius: 6px;
  height: 6px;
}

.wrapper::after {
 right: 0;
}