如何在div上实现向下箭头？

Question

我需要创建一个这样的价格标记：。有时，它会将Open和收藏（心）附加到价格上，有时则不会。

我设法创建了大部分内容（请参阅代码段）。我使用::before伪类来渲染收藏夹部分。我用::after来处理Open部分。

最后一块拼图是向下箭头。由于::before和::after都只能使用一次，因此我没有使用这些技巧。

那我该如何实施向下箭头？附：请注意，价格周围有一个边框，它也应包围箭头。

    body {
      background-color: lightsalmon;
      transform: scale(4.0);
      transform-origin: 0 0;
    }

    .home-price {
      color: white;
      border-width: 1px;
      border-style: solid;
      width: 50px;
      text-align: center;
      border-radius: 2px;
      font-family: Helvetica, Arial;
      font-size: 14px;
      font-weight: 300;
      display: inline-block;
      position: relative;
    }

    .home-sale {
      background-color: #009934;
      border-color: #F2F5F3;
    }

    .home-hot {
      background-color: #C81845;
      border-color: #F5F2F3;
    }

    .home-foreclosed {
      background-color: #FBA902;
      border-color: #F6F5F2;
    }

    /* Open House Marker */
    .home-price::after {
      border-width: 1px;
      border-style: solid;
      border-color: white;
      border-radius: 2px;
      border-spacing: 1px;
      content: "OPEN";
      color: white;
      background-color: #586371;
      font-family: Helvetica, Arial;
      font-size: 8px;
      font-weight: 300;
      display: block;
      position: absolute;
      top: -10px;
      left: -1px;
      text-align: center;
      width: 25px;
    }

    /* Favorite Marker */
    .home-price::before {
      content: "♥";
      color: red;
      display: block;
      position: absolute;
      left: 46px;     
      top: -8px;
      text-shadow:  white 0px 0px 1px,   
                    white 0px 0px 1px,   
                    white 0px 0px 1px,
                    white 0px 0px 1px,   
                    white 0px 0px 1px,   
                    white 0px 0px 1px;

    }

  <div style="height: 200px;margin-top: 30px;">
    <div class="home-price home-hot">$899K</div>
    <div class="home-price home-sale">$1.29M</div>
    <div class="home-price home-foreclosed">$11.8M</div>
  </div>

Answer 1

我相信Juanin意味着要打开＆＃34; Open＆＃34; ＆安培; ＆＃34;心脏＆＃34;内容到元素。 这反过来将释放伪和之前和在为了向下的人之后。

这是一个粗略的小提示，以显示他的意思。

https://jsfiddle.net/wd0um6q9/2/

和HTML标记：

  <div style="height: 200px;margin-top: 30px;">
    <div class="home-price home-hot"><i class="open">Open</i><i class="heart"></i>$899K</div>
  </div>

CSS：

/* Open House Marker */
    .open {
      border-width: 1px;
      border-style: solid;
      border-color: white;
      border-radius: 2px;
      border-spacing: 1px;
      color: white;
      background-color: #586371;
      font-family: Helvetica, Arial;
      font-size: 8px;
      font-weight: 300;
      display: block;
      position: absolute;
      top: -10px;
      left: -1px;
      text-align: center;
      width: 25px;
    }

    /* Favorite Marker */
    .heart:before {
      content: "♥";
      color: red;
      display: block;
      position: absolute;
      left: 46px;     
      top: -8px;
      text-shadow:  white 0px 0px 1px,   
                    white 0px 0px 1px,   
                    white 0px 0px 1px,
                    white 0px 0px 1px,   
                    white 0px 0px 1px,   
                    white 0px 0px 1px;

    }