在没有伪元素之前移动 html 块答案

【问题标题】：Move html block without before pseudo element在没有伪元素之前移动 html 块
【发布时间】：2016-09-06 11:12:43
【问题描述】：

让我们看看这个DEMO。这是一个日历，我可以从左向右移动。此日历与::before 三角形一起移动。这不是好的行为，我想在没有三角形的情况下移动它。有可能做到吗？最好不用js。

$('[type="range"]').on('input change', () => {
  $('.calendar').css('left', $('[type="range"]').val() + 'px');
})

.calendar {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 200px;
  border: 1px solid #ccc;
  padding: 20px;
}

.calendar:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 200px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent #ccc transparent;
}

.day {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid #aaa;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calendar">
  <div class="day">1</div>
  <div class="day">2</div>
  <div class="day">3</div>
  <div class="day">4</div>
  <div class="day">5</div>
  <div class="day">6</div>
  <div class="day">7</div>
  <div class="day">8</div>
  <div class="day">9</div>
  <div class="day">10</div>
</div>

<input type="range", min="50", max="200", value="70">

【问题讨论】：

您要移除三角形，还是在三角形停留在原位置时移动压光机？
@RicoBrassers 是的。在三角形停留在其位置时移动日历

标签： javascript html css pseudo-element

【解决方案1】：

我对您的代码进行了一些更改，它似乎可以工作:)。

CSS：

.ct {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 200px;
}
.calendar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  padding: 20px;
}
.ct:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 200px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent #ccc transparent;
}

.day {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid #aaa;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  margin: 5px;
}

HTML：

    <body>
  <div class="ct">
    <div class="calendar">
      <div class="day">1</div>
      <div class="day">2</div>
      <div class="day">3</div>
      <div class="day">4</div>
      <div class="day">5</div>
      <div class="day">6</div>
      <div class="day">7</div>
      <div class="day">8</div>
      <div class="day">9</div>
      <div class="day">10</div>
    </div>
  </div>

  <input type="range", min="50", max="200", value="70">
</body>

基本上，我添加了具有伪选择器（箭头）的父容器，并且这个容器没有移动。移动部分仅为 .calendar。

【讨论】：

【解决方案2】：

更新css

 .calendar:before {
      display:none;
    }

添加此箭头将隐藏。或者删除那个 .calendar:before class。

【讨论】：