css var & auto width css triangle All In One

css var & auto width css triangle All In One

css triangle

https://codepen.io/xgqfrms/pen/PooeEbd

1. css var

/* css triangle */ 
  .arrow-up,
  .arrow-down{
    margin-right: 10px;
    line-height:16px;
    height:16px;
    display: inline-block;
    position: relative;
    // cursor: pointer;
  }
  .arrow-up::after{
    top: calc(50% + 0px);
    left: calc(100% + 6px);
    position: absolute;
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-bottom: 4px solid transparent;
    border-style: solid;
    border-width: 0 5px 8px 5px;
    border-color: transparent transparent#ff5676 transparent;
  }
  .arrow-down::after{
    top: calc(50% - 0px);
    left: calc(100% + 6px);
    position: absolute;
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: rgba(69,202,181,1) transparent transparent transparent;
  }

https://codepen.io/xgqfrms/pen/pooVNNP

2. js & getComputedStyle

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

getComputedStyle(document.querySelector('span.search-box'), '::after').getPropertyValue('content');

https://stackoverflow.com/questions/44342065/how-to-get-a-dom-elements-before-content-with-javascript

refs

https://github.com/xgqfrms/vue/issues/59

https://github.com/vuejs-templates/webpack/issues/73#issuecomment-355149342

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---