Question

你能看一下这个演示吗？让我知道为什么我无法在div #map-toc之后添加伪元素？

正如您所看到的，这是在#map-toc

中添加内容

#map-toc {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0px;
  width: 200px;
  -webkit-transition: width 1.5s ease;
  -moz-transition: width 1.5s ease;
  -o-transition: width 1s ease;
  transition: width 1.5s ease;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  z-index: 10 !important;
  max-width: 320px;
  background: red;
}

#map-toc::after {
  content: ">>";
  display: block;
  width: 50px;
  height: 50px;
  background: green;
  top: 0px;
  margin-right: -20px;
}

  <div id="map-toc"></div>

Answer 1

由于伪元素是父元素的子元素，因此不可能将伪元素显示为 next 到父元素。正如MDN将告诉你的那样，

注意：getState和//create send call action const createSendCall = id => async dispatch => { const localStream = await getLocalStream(); console.log('reducer localStream', localStream); const call = state.peer.call(id, localStream); dispatch(createDoneSend(call)); } //create done send action const createDoneSend = call => ({ type:"DONE_SEND", call }) //reducer, SEND_CALL never comes here because it's handled in middle ware switch (action.type) { case 'DONE_SEND': { return { ...state, call:action.call }; } default: return state;生成的伪元素为 contained by the element's formatting box

为了实现您的目标，您最好使用兄弟元素，两个元素都具有 position: relative 和float: left。请注意，您现在还需要为红色框添加 height 。

这可以在以下内容中看到：

::before

::after

Div之后无法正确添加伪元素

1 个答案: