html - 1つのdiv内の20pxの下の境界線を削除しますが、ハックはありますか？

Question

ウェブサイトのほぼフッターに「トップに戻る」矢印が1つあり、そのdivに境界線があります。これまでのところすべてが順調ですが、私の唯一の問題は、CSSで行った三角形の周囲の境界線を削除したいということです。見た目が醜いので、境界線の下部は削除しません。

URLは次のとおりです：http：//teothemes.com/wp/

内部のdivの境界線を変更しようとしましたが、機能しませんでした

Answer 1

「ハック」を要求している限り、そうです。 HTML に別の div を:beforeおよび:after疑似要素で追加するだけです。これらの要素に border-bottom を移動し、適切に見える幅にします。

もちろん、これにはセマンティック値のない追加の HTML 要素が必要ですが、これら 3 つのコンテンツ div をすべて別の div でラップすることは理にかなっており、それにプロパティを追加することもできます。

ネストされたまたは複数の擬似要素がサポートされるようになった場合は、より良い方法になります。

残念ながら、:before および :after スタイルに下の境界線を追加するだけでは機能しません (それでも拡張しすぎます)。これは、CSS の境界線がレンダリングされる方法のためです。 . この質問への回答もこれを示しています。

Answer 2

私にはかなり単純に見えるので、この問題を完全に理解しているかどうかはわかりません。

divのborder-bottom: 1px solid #c6c5c5スタイルを省略した場合、問題は解消されます-いいえ？#backtotop

::beforeもう1つの方法は、矢印要素を変更して、実行している要素や要素ではなく、画像全体になるようにする::afterことです。ただし、パターンの背景を一致させる必要があります。

別の方法、特に複数のブラウザで機能する方法はわかりません。

Answer 3

It appears that your Arrow is an <a> tag with a CSS background.

So far everything's good, my only issue is that I'd like to remove any border around that triangle I did with CSS, no border-bottom because it looks ugly..

Upon inspection in Chrome, there is no border bottom being applied to it. In fact, it's an absolutely positioned element, and so borders won't work as spacing-givers. Just adjust your top property a little bit (maybe to 6px or 9px) and your positioning should be perfected.