将css边框添加到：element之后

Question

我有悬浮时显示的类似泡泡的弹出式窗口。我需要在气泡周围添加一个边框，但问题是我无法在气泡的指针上添加边框。

箭头由.bubble:after

制作

您可以在此处查看小提琴http://jsfiddle.net/livewirerules/c2Lh6zv6/1/

以下是css

.bubble {
  display: none;
  z-index: 10;
  position: absolute;
  border:solid 1px red;
  text-align:center;
  top: 40px;
  left: -20px;
  width: 75px;
  height: 80px;
  padding: 0px;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -15px;
left: 50%;
}

任何帮助将不胜感激

Answer 1

尝试添加：before元素，它创建与之相同的箭头：after，但要稍微大一点，然后选择红色。确保：之前是你的：之后，它应该产生与你的箭头后边界相同的影响。

.bubble::before
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0 16px 16px;
  border-color: red transparent;
  display: block;
  width: 0;
  z-index: 1;
  margin-left: -16px;
  top: -16px;
  left: 50%;
}

编辑：链接到正确的jsfiddle

revised fiddle

Answer 2

您需要一个新元素来模拟指针的“边框”，因为指针已经在使用边框来创建三角效果。

您可以简单地使用:before伪类来创建一个红色指针，该指针将放置在白色指针下。

/* Styles specific to this particular page */
#container2 {
    background: #eeeef4 none repeat scroll 0 0;
    border-radius: 5px;
    margin: 20px auto;
    padding: 20px;
    width: 250px;
}
.scroll-pane
{
	width: 50%;
	height: 200px;
	overflow: auto;
}
.horizontal-only
{
	height: auto;
	max-height: 200px;
}

.image {
  position: relative;
}
.image:hover .bubble {
  display: block;
}
.bubble {
  display: none;
  z-index: 10;
  position: absolute;
  border:solid 1px red;
  text-align:center;
  top: 40px;
  left: -20px;
  width: 75px;
  height: 80px;
  padding: 0px;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FF0000 transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -16px;
left: 50%;
}

.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -15px;
left: 50%;
}

td {
    width: 150px;
}

<div id="container">
<div class="scroll-pane horizontal-only">
				
        <table id="bu">
<tr>
  <td>Data</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data Input</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>

<tr>
  <td>Data Test</td>
  <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
  <div class="bubble">
  <a>Test</a>
  <br>
  <a>test</a>
  </div>

  </td>
</tr>
</table>
			</div>
      
      </div>

检查update fiddle。

中的示例

Answer 3

你可以做到这一点并且不再担心这一切＆＃34;当你的整个伪元素实际上是border时，将border添加到伪元素＆＃34;。

＆＃13;

＆＃13;

body {
  margin: 0;
}
.bubble {
  margin-top: 14.85px;  /* Get pseudo-element visibile triangle height: (c^2 = a^2 + b^2) / 2 */
  /* (c^2 = <pseudo-element width>^2 + <pseudo-element height>^2) / 2 */
  width: 80px;
  height: 80px;
  background-color: white; /* Change container background */
  border: 1px solid red; /* Change container border */
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
}
.bubble::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: inherit; /* Inherit container background */
  border-left: inherit; /* Inherit container border-left */
  border-top: inherit; /* Inherit container border-top */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((-20px / 2) - 1px)) rotateZ(45deg); /* calc((-<pseudo-element width> / 2) - <border-width>)) */
  box-sizing: inherit;
}
.bubble > * {
  position: relative; /* Position direct children on top of pseudo-element */
}

＆＃13;

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

＆＃13;

＆＃13;

＆＃13;

如果border-width在您的元素之间是一致的，则只需更改以下代码行：

background-color: <background-color>; /* Change container background */
border: 1px solid <border-color>; /* Change container border */

＆＃13;

＆＃13;

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bubble {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 14.85px;  /* Get pseudo-element visibile triangle height: (c^2 = a^2 + b^2) / 2 */
  /* (c^2 = <pseudo-element width>^2 + <pseudo-element height>^2) / 2 */
  width: 80px;
  height: 80px;
  background-color: chartreuse; /* Change container background */
  border: 1px solid dodgerblue; /* Change container border */
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
}
.bubble::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: inherit; /* Inherit container background */
  border-left: inherit; /* Inherit container border-left */
  border-top: inherit; /* Inherit container border-top */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((-20px / 2) - 1px)) rotateZ(45deg); /* calc((-<pseudo-element width> / 2) - <border-width>)) */
  box-sizing: inherit;
}
.bubble > * {
  position: relative; /* Position direct children on top of pseudo-element */
}

.bubble:nth-of-type(2) {
  background-color: gold;
  border: 1px solid purple
}

.bubble:nth-of-type(3) {
  background-color: dodgerblue;
  border: 1px solid cyan
}

.bubble:nth-of-type(4) {
  background-color: tomato;
  border: 1px solid firebrick;
}

＆＃13;

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

＆＃13;

＆＃13;

＆＃13;

应用于您的特定演示：

＆＃13;

＆＃13;

/* Styles specific to this particular page */

#container2 {
  background: #eeeef4 none repeat scroll 0 0;
  border-radius: 5px;
  margin: 20px auto;
  padding: 20px;
  width: 250px;
}

.scroll-pane {
  width: 50%;
  height: 200px;
  overflow: auto;
}

.horizontal-only {
  height: auto;
  max-height: 200px;
}

.image {
  position: relative;
}

.image:hover .bubble {
  display: block;
}

.bubble {
  display: none;
  z-index: 10;
  position: absolute;
  border: solid 1px red;
  text-align: center;
  top: 40px;
  left: -20px;
  width: 75px;
  height: 80px;
  padding: 0px;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.bubble::before {
  content: '';
  width: 15px;
  height: 15px;
  background-color: inherit; /* Inherit container background */
  border-left: inherit; /* Inherit container border-left */
  border-top: inherit; /* Inherit container border-top */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc((-15px / 2) - 1px)) rotateZ(45deg); /* calc((-<pseudo-element width> / 2) - <border-width>)) */
  box-sizing: inherit;
}
.bubble > * {
  position: relative; /* Position direct children on top of pseudo-element */
}

td {
  width: 150px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<link href="http://jscrollpane.kelvinluck.com/style/demo.css" rel="stylesheet"/>
<link href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css" rel="stylesheet"/>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<div id="container">
  <div class="scroll-pane horizontal-only">
    <table id="bu">
      <tr>
        <td>Data</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>

      <tr>
        <td>Data</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>

      <tr>
        <td>Data Input</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>

      <tr>
        <td>Data Test</td>
        <td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
          <div class="bubble">
            <a>Test</a>
            <br>
            <a>test</a>
          </div>

        </td>
      </tr>
    </table>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle

Answer 4

<div class="bubble">
  <span>Test Test Test Test</span>
</div>

node -v