vue style的:bofore中border设置无效

Question

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;

控制台展示

Answer 1

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>

Answer 2

:before 和 :content 写content: ''没有？

// 例：
.xxx:after{
  content: '';
  display: block;
  width: 100px;
  height: 1px;
  background: red;
}