类中的伪元素未按预期工作

Question

类中的伪元素未按预期工作。

我试图在我的div中有箭头，它在id中时有效，但在课堂上它不起作用。

我试过了：

.correct {
  background-color: green;
  color: white;
}

.lifeline {
  background-color: pink;
  color: white;
}

.incorrect {
  background-color: red;
  color: white;
}

.locked {
  background-color: yellow;
  color: white;
}

.timeout {
  background-color: orange;
  color: white;
}


/*
.question1{
	background-color: blue;
	color: white;
}
*/

.hidden_timer {
  visibility: hidden;
}

.visible {
  visibility: visible !important
}

#pointer1,
#pointer2,
#pointer3,
#pointer4 {
  width: 95%;
  height: 40px;
  position: relative;
  background: blue;
  color: white;
}

#pointer1:after,
#pointer2:after,
#pointer3:after,
#pointer4:after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 20px solid blue;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

#pointer1:before,
#pointer2:before,
#pointer3:before,
#pointer4:before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid blue;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.pointer {
  width: 200px;
  height: 40px;
  position: relative;
  background: blue;
}

.pointer::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 20px solid blue;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.pointer::before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid blue;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<table id="test" class="table table-bordered table-responsive">
  <tbody>
    <tr class="text-center pointer">

      <td colspan="4">Who was First President of India?(15404)</td>
    </tr>
    <tr>

      <td colspan="2" id="A1" class="timeout" onclick="onSelect(event)">
        <div id="pointer1" class="question">A) M K Gandhi
        </div>
      </td>
      <td colspan="2" id="B1" class="timeout" onclick="onSelect(event)">
        <div id="pointer2" class="question">B) Jawaharlal Nehru
        </div>
      </td>
    </tr>
    <tr>

      <td colspan="2" id="C1" class="correct" onclick="onSelect(event)">
        <div id="pointer3" class="question">C) Rajendra Prasad
        </div>
      </td>
      <td colspan="2" id="D1" class="timeout" onclick="onSelect(event)">
        <div id="pointer4" class="question">D) Chandra Shekhar Azad
        </div>
      </td>
    </tr>
  </tbody>
</table>

类中的伪元素未按预期工作。

我试图在我的div中有箭头，它在id中时有效，但在课堂上它不起作用。

Answer 1

因为你的div上没有pointer课程

<div id="pointer1" class="question">

应该是

<div id="pointer1" class="question pointer">

或者您可以更新您的css以定位.question类

Answer 2

在HTML中添加pointer类。 检查此代码段：

.correct {
  background-color: green;
  color: white;
}

.lifeline {
  background-color: pink;
  color: white;
}

.incorrect {
  background-color: red;
  color: white;
}

.locked {
  background-color: yellow;
  color: white;
}

.timeout {
  background-color: orange;
  color: white;
}


/*
.question1{
	background-color: blue;
	color: white;
}
*/

.hidden_timer {
  visibility: hidden;
}

.visible {
  visibility: visible !important
}

   
.pointer {
  width: 200px;
  height: 40px;
  position: relative;
  background: blue;
}

.pointer::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 20px solid blue;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.pointer::before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid blue;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<table id="test" class="table table-bordered table-responsive">
  <tbody>
    <tr class="text-center pointer">

      <td colspan="4">Who was First President of India?(15404)</td>
    </tr>
    <tr>

      <td colspan="2" id="A1" class="timeout" onclick="onSelect(event)">
        <div id="pointer1" class="question pointer">A) M K Gandhi
        </div>
      </td>
      <td colspan="2" id="B1" class="timeout" onclick="onSelect(event)">
        <div id="pointer2" class="question pointer">B) Jawaharlal Nehru
        </div>
      </td>
    </tr>
    <tr>

      <td colspan="2" id="C1" class="correct" onclick="onSelect(event)">
        <div id="pointer3" class="question pointer">C) Rajendra Prasad
        </div>
      </td>
      <td colspan="2" id="D1" class="timeout" onclick="onSelect(event)">
        <div id="pointer4" class="question pointer">D) Chandra Shekhar Azad
        </div>
      </td>
    </tr>
  </tbody>
</table>