偽類隨着瀏覽器窗口大小變更，改變寬度（resize）

偽類隨着瀏覽器窗口大小變更，改變寬度（resize），偽類樣式的更改

css

.plan_wrapper .plan_com:not(:last-child)::after{
    content:'';
    width:400px;
    height:1px;
    border-bottom:2px dashed #9498b1;
    position:absolute;
    left: 130px;
    top:30px;

}

html

<div class="plan_wrapper ">
       <div class="plan_wrapper ">
              <div class="plan_com plan_com1">@name1</div>
              <div class="plan_com plan_com2 ">@name2</div>
              <div class="plan_com plan_com3 ">@name3</div>
              <div class="plan_com plan_com4  ">@name4</div>
         </div>
</div>

　　

script

<script type="text/javascript">
    $(function(){
        //resize() 當調整瀏覽器窗口大小時，發生 resize 事件。
        $(window).resize(function(){
        var wid_plan =$(".check_plan").width();
        var wid_com = parseInt((wid_plan - 390) / 3);
        //jquery改變偽類的寬度，用變量代替原來的值
        var appendStr = "<style>.plan_wrapper .plan_com:not(:last-child)::after{width: " + wid_com + "px;}</style>";
        $(".plan_com").append(appendStr);
        })
    })
</script>