vue style的:bofore中border设置无效

list.vue

<template>
  <div class="list">
    <div class="area">
      <div class="title" border-topbottom>当前城市</div>
    </div>
    <div class="area">
      <div class="title" border-topbottom>热门城市</div>
    </div>
    <div class="area">
      <div class="title" border-topbottom>A</div>
    </div>
  </div>



</template>

<script>
export default {
  name: "CityList"
}
</script>

<style lang="stylus" scoped>
@import "~css/varibles.styl";
  .border-topbottom
    &:before
      border-color red
    &:after
      border-color red
.list
  border .02rem red
  .title
    background #eee
    height .44rem
    padding-left .2rem
    font-size .26rem
    border-bottom .1rem !important
    // margin-top .1rem
</style>

varibles.styl

$bgColor=#00bcd4;
$darkTextColor=#333;
$headerHeight=.86rem;

控制台展示

border无效.PNGborder-style.PNGborder 模型.PNG

阅读 622
评论
    2 个回答
    huqi
    • 783
    border-topbottom 放到 class里试试
    <template>
      <div class="list">
        <div class="area">
          <div class="title border-topbottom">当前城市</div>
        </div>
        <div class="area">
          <div class="title border-topbottom">热门城市</div>
        </div>
        <div class="area">
          <div class="title border-topbottom">A</div>
        </div>
      </div>
    
    </template>
    评论 赞赏
      Bestime
      • 2.3k

      :before:contentcontent: ''没有?

      // 例:
      .xxx:after{
        content: '';
        display: block;
        width: 100px;
        height: 1px;
        background: red;
      }
      评论 赞赏
        撰写回答

        登录后参与交流、获取后续更新提醒